<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>
</head>
<body>
<!-- 用于获取用户id -->
<input id="uid" value="1" hidden="hidden" th:value="${session.nowUser.uid}"/>
<!--
    作者：976493753@qq.com
    时间：2020-03-16
    描述：用于获取用户级别，判断展示容器内的数据
-->
<input id="level" value="user" hidden="hidden" th:value="${session.nowUser.level}"/>

<div class="container" id="memberContainer">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            本人照片：
        <img th:src="@{img/{avatar}(avatar=${session.nowUser.myself})}" id="myself" width="100" height="100"/>
        </div>
            <div class="col-sm-4"></div>
        </div>
       <p>&nbsp;</p>
     <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon3">您的会员卡到期时间为：</span>
                <input type="text" class="form-control"  th:value="${session.nowUser.endMember}" id="endMember" aria-describedby="basic-addon3" readonly="readonly">
            </div>
        </div>
        <div class="col-sm-2"></div>
    </div>
</div>


<div class="container" id="userContainer">
       <div class="row">
           <div class="col-sm-2"></div>

           <div class="col-sm-8">
               <p>&nbsp;</p>
               <p style="text-align: center;color:red;">照片需要与本人相同，否则后果自负，在确认付款之后无法更改</p>
               <p>&nbsp;</p>
           <div class="input-group">
               <span class="input-group-addon" id="basic-addon8">头像照片</span>
               <div class="col-sm-3">
                   <img id="pic" src="images/avatar.png" th:src="@{img/{avatar}(avatar=${session.nowUser.myself})}">
                   <input id="upload" name="file" accept="images/*" type="file" style="display: none"  aria-describedby="basic-addon7" />
                   <input type="hidden" id="fileName" value="default.jpg" />
               </div>
               <div class="col-sm-7" >
                   <p style="font-size: 18px;margin-top: 40px;">点击左侧空心圆实现上传<Strong style="color: green;">(若不填则会选择系统默认)</Strong>，若是更换其他再次点击即可,若取消当前上传请点击
                       <em onclick="stopUpload()" style="color: red;">取消</em></p>
               </div>
           </div>
               <p>&nbsp;</p>
          <!--  <div class="input-group">
                <label class="col-sm-3 control-label"  style="color:#5FB878;">本人照</label>
                <div class="col-sm-3">
                    <img id="pic" src="images/avatar.png">
                    <input id="upload" name="file" accept="images/*" type="file" style="display: none"/>
                    <input type="hidden" id="fileName" value="default.jpg" />
                </div>
                <div class="col-sm-6" >
                    <p style="font-size: 18px;margin-top: 40px;">点击左侧头像，选择自己图片实现上传<Strong style="color: green;">(若不填则会选择系统默认)</Strong>，若是更换其他再次点击即可,若取消当前上传请点击
                        <em onclick="stopUpload()" style="color: red;">取消</em></p>
                </div>
            </div>-->
            <p>&nbsp;</p>
           <div class="input-group" id="member-level">
               <span class="input-group-addon" id="basic-addon4">&nbsp;&nbsp;会员卡&nbsp;&nbsp;</span>
               <select type="text" class="form-control" id="cardLevel" aria-describedby="basic-addon4" >
                       <option value="1" emoney="200">月卡</option>
                       <option value="3" emoney="800">半年卡</option>
                       <option value="4" emoney="1200">年卡</option>
                       <option value="5" emoney="2000"> 两年卡</option>
                       <option value="6" emoney="5000"> 十年卡</option>
                   </select>
               </select>
           </div>
          <!--  <div class="input-group" id="member-level"  style="color:#5FB878;">
                <label class="col-sm-3 control-label">会员卡</label>
                <div class="col-sm-9">
                    <select class="form-control" id="cardLevel">
                        <option value="1" emoney="200">月卡</option>
                        <option value="3" emoney="800">半年卡</option>
                        <option value="4" emoney="1200">年卡</option>
                        <option value="5" emoney="2000"> 两年卡</option>
                        <option value="6" emoney="5000"> 十年卡</option>
                    </select>
                </div>
            </div>-->
               <p>&nbsp;</p>
            <p>&nbsp;</p>
           <div class="input-group">
               <span class="input-group-addon" id="basic-addon1" >您需要支付(元)</span>
               <input type="text" class="form-control" id="totalPrice" aria-describedby="basic-addon1" readonly="readonly">
           </div>

            <!--<div class="input-group">
                <label class="col-sm-3 control-label"  id="usernameHint" style="color:#FF0000;">您需要支付(元)</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="totalPrice" readonly="readonly">

                </div>
            </div>-->
                <p>&nbsp;</p>

                <div class="input-group">
                        <button class="btn btn-success" id="payMoney" style="margin-left: 240px">确认付款</button>
                </div>
           </div>
           <div class="col-sm-2"></div>
    </div>
</div>
<!--提示框-->
<div id="info">
    <span id="msg"></span>
</div>

</body>
<style>
    /**
   * 注册提示框样式
   */
    #info{
        display: none;
        width: 200px;
        height: 200px;
        background-color: #000000;
        opacity:0.7;
        border-radius: 30px;
        margin: 150px auto;
        color: white;
        position:absolute;
        top:20%;
        left:30%;
        z-index: 10000;
    }
    #info p{
        text-align: center;
        font-size: 18px;
        padding: 10px;
    }
    #pic{
        width:100px;
        height:100px;
        border: 1px solid #000000;
        border-radius:50% ;
        margin:20px auto;
        cursor: pointer;
    }
    #memberContainer{
        margin-top: 10%;
    }
</style>
<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
<script>
    $(function(){

        showContainer($("#level").val());

        //初始化总价的值
        $("#totalPrice").val($("#cardLevel").find("option:selected").attr("emoney"));



    });
    var urlList = new Array();

    function pUrl(id,url){
        this.id = id;
        this.url = url;
    }

    $("#pic").click(function () {
        $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
        $("#upload").on("change",function(){
            var formData = new FormData();
            formData.append('file', $('#upload')[0].files[0]);
            formData.append("selectId", $("#uid").val());
            console.log(formData);
            $.ajax({
                url: "/upload",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $("#fileName").val(data);
                },
                error: function () {
                    alert("上传失败！");

                }
            });
            var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                urlList.push(new pUrl($("#uid").val(),objUrl));
            }
        });
    });

    function stopUpload(){
        $("#pic").attr("src","images/avatar.png");
        $("#fileName").val("default.jpg");
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    function showContainer(a){
        if(a=='user'){
            $("#userContainer").css("display","block");
            $("#memberContainer").css("display","none");
        }else{
            $("#userContainer").css("display","none");
            $("#memberContainer").css("display","block");
        }
    }


    //监听会员卡级别,根据会员卡级别变换总价的值
    $("#cardLevel").on('change',function(){
        $("#totalPrice").val($("#cardLevel").find("option:selected").attr("emoney"));
    });


    $("#payMoney").click(function(){



        $.post("/upToMember",{"cid":$("#cardLevel").val(),
                "uid":$("#uid").val(),
                "myself":$("#fileName").val()},
            function(data){
                console.log(data);
                if(urlList.length!=0){
                    var src = urlList[urlList.length-1].url;
                    $("#myself").attr("src",src);
                }
                $("#endMember").val(data.endMember);

                $("#info").css("display","block");
                $("#msg").html("<p>&nbsp;</p>" +
                    "<p style='font-size: 40px;'>成功</p>");
                window.setTimeout(function(){$("#info").css("display","none");},2500);

                showContainer(data.level);
            });
    });
</script>
</html>
